<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 500px;
            border: 2px solid;
            margin: 0 auto;
            padding: 10px;
            background-color: #ffffff;
        }
        .check-all{
            border-bottom:2px solid;
            padding: 10px;
        }

    </style>
</head>
<body>
    <section class="box">
        <section class="check-all">
            <input type="checkbox"  id="all">
            <label for="all">全选</label>
            <a href="javaScript:;" class="inverse">反选</a>
        </section>
        <section class="items">
            <p><label><input type="checkbox">选项1</label></p>
            <p><label><input type="checkbox">选项2</label></p>
            <p><label><input type="checkbox">选项3</label></p>
            <p><label><input type="checkbox">选项4</label></p>
            <p><label><input type="checkbox">选项5</label></p>
            <p><label><input type="checkbox">选项6</label></p>
            <p><label><input type="checkbox">选项7</label></p>
            <p><label><input type="checkbox">选项8</label></p>
            <p><label><input type="checkbox">选项9</label></p>
        </section>
    </section>

    <script>
    window.onload = function(){
        var checkAll = document.querySelector('.check-all #all');//全选iput
        var inputs = document.querySelectorAll('.items input');//所有的选项input
        var label = document.querySelector('.check-all label');//全选iput的标注
        var inverse = document.querySelector('.inverse');//反选按钮

        var isCheckAll = function(){
            // 记录被选中的个数
            var count = 0;
            for(var i=0;i<inputs.length;i++){
                if(inputs[i].checked){
                    count++;
                    // console.log(count);
                }
            }
            // 当所有的input都被选中的状态，那个全选按钮也要被选中
            checkAll.checked = count == inputs.length;
            label.innerHTML = checkAll.checked ? '全不选' : '全选';
        }
        // 实现一键全选,不全选
        checkAll.onclick = function(){
            for(var i=0;i<inputs.length;i++){
                inputs[i].checked = this.checked;
            }
            isCheckAll();
        }
        // 反选,循环取反
        inverse.onclick = function(){
            for(var i=0;i<inputs.length;i++){
                inputs[i].checked = !inputs[i].checked;
            }
            isCheckAll();
        }
        // 实时检测状态，检测全选是够需要勾选
        for(var i=0;i<inputs.length;i++){
            inputs[i].onclick = function(){
                isCheckAll();
            }
        }
    }
    </script>
</body>
</html>